<template>
    <lay-container :fluid="true" style="padding: 10px;padding-top: 10px;">
        <lay-card style="padding:10px;">
            <lay-row style="margin-bottom:10px;">
                <lay-breadcrumb>
                    <lay-breadcrumb-item title="内容管理"></lay-breadcrumb-item>
                    <lay-breadcrumb-item :title="addoredittip"></lay-breadcrumb-item>
                </lay-breadcrumb>
            </lay-row>

            <lay-row space="10">
                <lay-form :model="form">
                    <lay-col :md="24">
                        <lay-form-item label="栏目" prop="cid" required>
                            <lay-col md="6">
                                <lay-select v-model="form.cid">
                                    <lay-select-option :value="0" label="请选择栏目"></lay-select-option>
                                    <lay-select-option v-for="cate in cateList" :value="cate.id" :label="cate.title"
                                        :disabled="cate.type == 1">
                                    </lay-select-option>
                                </lay-select>
                            </lay-col>
                        </lay-form-item>
                        <lay-form-item label="标题" prop="title" required required-error-message="标题不能空">
                            <lay-col md="18">
                                <lay-input v-model="form.title"></lay-input>
                            </lay-col>
                        </lay-form-item>
                        <lay-form-item label="内容" prop="content">
                            <lay-col md="24">
                                <WangEditor v-model="form.content"></WangEditor>
                            </lay-col>
                        </lay-form-item>
                        <lay-form-item label="审核人" prop="examine" required required-error-message="审核人不能空">
                            <lay-col md="6">
                                <lay-input v-model="form.examine"></lay-input>
                            </lay-col>
                        </lay-form-item>
                        <!-- <div v-permission="PerKey.Upload_Upload">
                            <UploadImg v-model="form.img" uplabel="缩略图" :file-size="500"></UploadImg>                            
                        </div> -->
                        <lay-form-item label="缩略图" v-permission="PerKey.Content_Status">
                            <lay-col md="6">
                                <lay-input v-model="form.img"></lay-input>
                            </lay-col>
                            <lay-col md="6"> <lay-button @click="getImages(form.content)"
                                    type="primary">获取内容第一张图</lay-button></lay-col>
                        </lay-form-item>

                        <lay-form-item label="属性" v-permission="PerKey.Content_Status">
                            <lay-col md="6">
                                <lay-checkbox v-model="form.attA" skin="primary" :value="1">头条</lay-checkbox>
                                <lay-checkbox v-model="form.attB" skin="primary" :value="1">小头条</lay-checkbox>
                                <lay-checkbox v-model="form.attC" skin="primary" :value="1"
                                    v-if="form.img != undefined">
                                    轮换图</lay-checkbox>
                            </lay-col>
                        </lay-form-item>
                        <div v-permission="PerKey.Upload_Upload">
                            <lay-field title="附件">
                                <UploadAttments v-model="form.attments" :attList="getAttments" />
                            </lay-field>
                        </div>
                        <lay-form-item label="状态" prop="status">
                            <lay-col md="6" class="tip">
                                <lay-radio-group v-model="form.status">
                                   <span v-permission="PerKey.Content_Publish"> <lay-radio :value="true">发布</lay-radio></span>
                                    <lay-radio :value="false">草稿</lay-radio>
                                </lay-radio-group>
                            </lay-col>
                            <lay-col md="6"> </lay-col>
                        </lay-form-item>
                        <lay-form-item v-if="btnHide">
                            <lay-button @click="submitClick" type="primary" v-permission="PerKey.Content_AddOrEdit"
                                prefix-icon="layui-icon-ok">
                                {{ addoredittip }}
                            </lay-button>
                        </lay-form-item>
                    </lay-col>
                </lay-form>
            </lay-row>
        </lay-card>
    </lay-container>
</template>

<script  lang="ts" >
import { reactive, ref, toRefs } from "vue";
import { layer } from "@layui/layer-vue";
import { getEdit, putEdit, postAdd } from "../../../api/module/content/content";
import { PerKey } from "../../../library/permissionConst"
import { useRoute, useRouter } from "vue-router";
import WangEditor from '../../../layouts/Editor/wangEditor.vue'
import UploadImg from '../../../layouts/Upload/UploadImg.vue'
import UploadAttments from '../../../layouts/Upload/UploadAttments.vue'
import { Content } from '../../../types/content'
import { Attment } from "../../../types/attment"
import { Result } from "../../../types/result"
import Util from '../../../library/Util'
export default {
    components: { WangEditor, UploadImg, UploadAttments }
}
</script>

<script lang="ts" setup>
const router = useRouter();
const data = reactive({
    form: <Content><unknown>[],
    getAttments: [<Attment>{}],
});
const { form, getAttments } = toRefs(data);
const route = useRoute();
const id = ref(Number(route.query.Id))
const cid = ref(Number(route.query.Cid))
let addoredittip = ref({});

const cateList = ref({ targetList: [] as any, });

getEdit(id.value).then((res) => {
    cateList.value = res.data.cateList;
    if (id.value == 0) {
        addoredittip.value = "新增内容";
        form.value = {
            id: 0,
            cid: cid.value > 0 ? cid.value : 0,
            title: "",
            examine: "",
            content: "",
            attA: false,
            attB: false,
            attC: false,
            status: false
        }
        getAttments.value = []
        return;
    } else {
        addoredittip.value = "编辑内容";
        if (res.status == 1) {
            form.value = res.data.data
            getAttments.value = res.data.attments ?? []
        }
    }
});

//获取缩略图第一张图片路径，
const getImages = (str: string) => {
    let src = Util.getStringImage(str, 1) 
    if (src != null) {
    form.value.img = src
    }
}

const btnHide = ref(true)

const submitClick = function () {
    if (!form.value.title || form.value.cid == 0 || !form.value.examine) {
        layer.msg("名称或者栏目不能空", { time: 2000, icon: 2 });
        return;
    }
    if (form.value.attments != null)//对附件进行类型转换
        form.value.attments = String(form.value.attments)
    if (form.value.id == 0) {
        postAdd(form.value).then((res) => {
            done(res);
        });
    } else {
        putEdit(form.value).then((res) => {
            done(res);
        });
    }
};
const done = (res: Result) => {
    if (res.status == 1) {
        btnHide.value = false //隐藏按钮
        layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
            router.push({ path: "/cms/content/list", query: { Cid: form.value.cid } });
        });
    }
    else {
        layer.msg(res.msg, { icon: 2 });
        return false;
    }
};



</script>

<style scoped>
.tip {
    color: gray;
    line-height: 38px;
    height: inherit;
    padding-left: 10px;
}
</style>